<template>
    <div class="common-layout">
      <el-container>
        <el-header height="100%">
          <HeaderView />
        </el-header>
        <el-main height="100%" style="background-color: #F5F5F5;">
          <div class="registerbox">
            <h1 style="margin: 0 auto; text-align: center; margin: 30px 0">注册</h1>
            
            <!-- 将表单分为左右两列 -->
            <div class="form-container">
              <!-- 左列 -->
              <div class="form-column">
                <input type="text" v-model="user.username" placeholder="用户名" class="text">
                <input type="text" v-model="user.name" placeholder="昵称" class="text">
                <input type="password" v-model="user.password" placeholder="密码" class="text">
                <input type="password" v-model="confirmPassword" placeholder="确认密码" class="text">
              </div>
              
              <!-- 右列 -->
              <div class="form-column">
                <input type="email" v-model="user.email" placeholder="邮箱" class="text">
                <div class="gender-selector text">
                  <span class="gender-label">性别：</span>
                  <el-radio-group v-model="user.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                  </el-radio-group>
                </div>
                <input type="number" v-model="user.age" placeholder="年龄" class="text">
                <input type="tel" v-model="user.telephone" placeholder="联系电话" class="text">
              </div>
            </div>

            <!-- 注册按钮居中显示 -->
            <div class="button-container">
              <el-button type="primary" @click="register" color="#B01F24" class="register-btn">
                注册
              </el-button>
            </div>
          </div>
        </el-main>
        <el-footer height="100%">
          <FooterView />
        </el-footer>
      </el-container>
    </div>
</template>

<script>
import req from '../utils/request';
import HeaderView from '@/view/HeaderView.vue';
import FooterView from '@/view/FooterView.vue';
import router from '@/router';

export default {
  name: 'RegisterView',
  components: {
    HeaderView,
    FooterView
  },
  data() {
    return {
      user: {
        username: "",
        name: "",
        password: "",
        email: "",
        gender: 1,
        age: "",
        telephone: ""
      },
      confirmPassword: "",
      showGenderError: false
    }
  },
  methods: {
    validateGender() {
      this.showGenderError = false;
    },
    register() {
      // 用户名验证
      if (!this.user.username.trim()) {
        alert('请输入用户名');
        return;
      }
      if (this.user.username.length < 3) {
        alert('用户名长度不能少于3位');
        return;
      }

      // 昵称验证
      if (!this.user.name.trim()) {
        alert('请输入昵称');
        return;
      }

      // 密码验证
      if (!this.user.password) {
        alert('请输入密码');
        return;
      }

      // 确认密码验证
      if (!this.confirmPassword) {
        alert('请确认密码');
        return;
      }
      if (this.user.password !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      // 邮箱验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.user.email.trim()) {
        alert('请输入邮箱');
        return;
      }
      if (!emailRegex.test(this.user.email)) {
        alert('请输入正确的邮箱格式');
        return;
      }

      // 性别验证
      if (!this.user.gender) {
        this.showGenderError = true;
        return;
      }

      // 年龄验证
      if (!this.user.age) {
        alert('请输入年龄');
        return;
      }
      const age = parseInt(this.user.age);
      if (isNaN(age) || age < 1 || age > 120) {
        alert('请输入有效的年龄');
        return;
      }

      // 电话号码验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.user.telephone.trim()) {
        alert('请输入联系电话');
        return;
      }
      if (!phoneRegex.test(this.user.telephone)) {
        alert('请输入正确的手机号码格式');
        return;
      }

      // 发送注册请求
      req.post("/user/register", {
        username: this.user.username.trim(),
        name: this.user.name.trim(),
        password: this.user.password,
        email: this.user.email.trim(),
        gender: this.user.gender,
        age: parseInt(this.user.age),
        telephone: this.user.telephone.trim()
      }).then(res => {
        if (res.code === 200) {
          alert("注册成功");
          router.push({ name: "login" });
        } else {
          alert(res.data.msg || "注册失败");
        }
      }).catch(err => {
        console.error(err);
        alert("注册失败，请稍后重试");
      });
    }
  }
}
</script>

<style scoped>
.registerbox {
  width: 650px;
  margin: 200px auto 100px;
  border: 5px solid #B01F24;
  background-color: white;
  border-radius: 10px;
  padding: 0 20px;  /* 添加左右内边距 */
}

.form-container {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
}

.form-column {
  flex: 1;
  margin: 0 20px;
}

.text {
  margin: 20px 0;  /* 调整上下间距 */
  display: block;
  padding: 0 20px;
}

input {
  width: 200px;
  height: 30px;
  border-radius: 5px;
  background-color: rgb(226, 226, 226);
  border: 0;
}

input:focus {
  outline: 2px solid #B01F24;
}

.gender-selector {
  display: flex;
  align-items: center;
  width: 200px;
  margin: 20px 0;  /* 与其他输入框保持一致的间距 */
}

.gender-label {
  margin-right: 10px;
}

.button-container {
  text-align: center;
  margin: 20px 0 40px;  /* 调整按钮的上下间距 */
}

.register-btn {
  width: 220px;
}

/* 调整单选按钮组的样式 */
:deep(.el-radio-group) {
  display: flex;
  gap: 20px;
}
</style>